<template>
  <div class="login">
      <el-form label-position="left" label-width="60px" :model="form">
        <h2>欢迎登录后台管理系统</h2>
        <el-form-item label="账号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="commit">登录</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from 'vuex'
export default {
  data () {
      return {
          form: {
              username: 'admin',
              password: '123456'
          }
      }
  },
  methods:{
    ...mapActions('user',['login']),
    ...mapMutations('user', ['setUserInfo']),
    commit(){
      this.login(this.form).then(res => {
          this.setUserInfo(res.user);
          this.$message({
              message: res.msg,
              type: 'success'
          });
          this.$router.push('/context/index');
      }, res => {
          this.$message.error(res.msg);
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login
{
  position: fixed;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:#dfe9fb;
  .el-form
  {
    width:350px;
    position: fixed;
    left:50%;
    top:50%;
    margin-top:-200px;
    margin-left:-175px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    width: 350px;
    padding: 35px 35px 15px 35px;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    background: -webkit-gradient(linear,0 0,0 100%,from(#ace),to(#00c1de));
    background: -webkit-linear-gradient(top,#ace,#00c1de);
    h2
    {
      margin-bottom:20px;
      text-align:center;
    }
    .el-form-item
    {
      .el-button
      {
        width:100%;
      }
    }
  }
}

</style>
